*.main {
    margin-left:20px;
}

*.div5_container {
    position:relative;
}

*.col_1_box {
    float:left;
    height:100%;
    width:155px;

    border:1px solid red;
}
*.col_2 { float:left; height:100%; width:105px; }
*.col_3 { float:left; height:100%; width:105px; }
*.col_margin {
    margin-left:35px;
}
*.col1_label { float:left; width:155px; }
*.col2_label { float:left; width:105px; }
*.last_col_label { display:inline-block; width:155px; }

*.main_rows_padding {
    /* padding:0px 50px;  /* 2-values: T-B, L-R;      4-values: T-R-B-L */
    padding-left:50px;
}

*.main_rows {
    height:80px;
    width:500px;
    text-align:center;

    margin-top:0px;    /* TODO STRANGE I don't know why changing this value affect only the 1st division, div1 and not the other divx */

    clear:both;
    background-color:white;
    border:1px solid green;
    /* repeat-y; */    /* <=== WHAT DOES this do??? doesn't seem like anything?! */
}

#div5 {
    position:absolute;
    height:80px;
    width:500px;
}

*.box     { background-color:gold; border:1px solid black; 1margin:5px; 1padding:5px;  } 
*.spacer  {
    height:15px;
    border:none!important;
    background:none!important;
    font-size:1px;
    line-height:1px;
    clear:both;
}

*.replaced_inline_shrinkwrapped  {
    height:auto;
    border:2px solid blue;
}
*.replaced_inline_sized          { height:65px;  }
*.replaced_inline_stretched      { height:100%;  }

*.inline_block_auto     {display:inline-block; height:auto;   width:150px; }
*.inline_block_sized    {display:inline-block; height:65px;   width:100px; }
*.inline_block_100_pct  {display:inline-block; height:100%;   width:100px; }

*.block_auto            { height:auto;   width:150px; }
*.block_sized           { height:65px;   width:100px; }
*.block_100_pct         { height:100%;   width:100px; }

*.table_auto            { height:auto;   width:150px; }
*.table_sized           { height:65px;   width:100px; }
*.table_100_pct         {
    height:100%;
    width:100px;
    margin-top:5px;
    border:1px solid lime;
}

*.float_auto            { height:auto;   bottom:150px; float:left;  width:150px;  }
*.float_sized           { height:65px;   float:left;  width:100px;  margin-left:38px; }
*.float_100_pct         { height:100%;   float:left;  width:100px;  margin-left:38px; }

*.absolute_auto_bottom_auto {
    position:absolute;
    top:0px;
    bottom:auto;
    left:0px;

    height:auto;
    width:170px;
}
*.absolute_sized {
    position:absolute;
    top:0px;
    bottom:auto;
    left:188px;

    height:65px;
    width:100px;
}
*.absolute_100_pct_bottom_0 {
    position:absolute; 
    top:0px;
    bottom:9999px;
    left:328px;

    height:100%;
    width:100px;
}

*.absolute_auto_bottom_0 {
    position:absolute; 
    top:0px;
    bottom:0px;         /* <==  NOTE: BOTTOM takes precedent because this box is ABSOLUTE; it has nothing to do with height being
                                auto or 100% */
    left:463px;

    height:auto;
    width:100px;
}
